<template>
  <div>
    <p>{{this.form.list}}</p>
    <h1>添加信息</h1>
    <div class="box">
      <el-form ref="form" class="box-top" :model="form" label-width="80px">
        <el-form-item label="分类ID">
          <el-input v-model="form.id" placeholder="请输入id"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="form.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="btn" type="primary" @click="add">添加信息</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      form: {
        list: "/zsgc/add",
        id: "",
        title: "",
        content: ""
      },
    };
  },
  methods: {
        add() {
          axios
            .post("/news/add/", {
              category: this.form.id,
              title: this.form.title,
              content: this.form.content
            })
            .then(res => {
              console.log(res);
            });
        }
      }
};
</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #7d7d7d;
  float: right;
  padding-right: 15px;
  margin-top: 10px;
}
h1 {
  padding-top: 50px;
  text-align: center;
}
.box {
  width: 450px;
  height: 340px;
  border: 1px solid black;
  border-radius: 10px;
  margin: 0 auto;
  padding: 20px;
}
.box-top {
  margin-top: 50px;
}
.btn {
  width: 50%;
  margin-left: 20%;
}
</style>